<template>
  <div class="my-client">
    <div class="mc-main">
      <div class="mcm-form">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >

          <el-form-item>
            <el-input
              v-model="formInline.region"
              placeholder="请输入客户编号"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="formInline.user"
              placeholder="请输入客户名称"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
            >查询</el-button>
          </el-form-item>
        </el-form>
        <button
          class="mcmf-button"
          @click="dialogVisible = true"
        >新增</button>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
      >
        <el-table-column
          prop="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="客户编号"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template>
            <el-button
              @click="dialogVisible = true"
              type="text"
              size="small"
              :style="{color: '#C29C0F'}"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="mcm-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="新增客户"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-input
        v-model="ruleForm.name"
        placeholder="请填写客户名称！"
        :style="{marginBottom: '20px'}"
      ></el-input>
      <el-input
        v-model="ruleForm.num"
        placeholder="请填写客户编号！"
        :style="{marginBottom: '20px'}"
      ></el-input>
      <el-input
        v-model="ruleForm.phone"
        placeholder="请填写客户联系电话！"
        :style="{marginBottom: '20px'}"
      ></el-input>
      <el-select
        v-model="ruleForm.sex"
        placeholder="请填写客户联系性别！"
        :style="{marginBottom: '20px', width: '100%'}"
      >
        <el-option
          label="男"
          value="男"
        >
        </el-option>
        <el-option
          label="女"
          value="女"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="ruleForm.address"
        placeholder="请填写客户详细地址！"
      ></el-input>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
        date: "",
      },
      dialogVisible: false,
      currentIndex: 2,
      ruleForm: {
        name: "",
        num: "",
        phone: "",
        address: "",
        sex: "",
      },
      tableData: [
        {
          index: "1",
          num: "4296AQ",
          name: "Rocky",
          sex: "男",
          phone: "11000",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSubmit() {
      let params = {
        name: this.ruleForm.name,
        num: this.ruleForm.num,
        phone: this.ruleForm.phone,
        address: this.ruleForm.address,
        sex: this.ruleForm.sex,
      };
      params.index = this.currentIndex;
      this.tableData.unshift(params);
      this.ruleForm.name = "";
      this.ruleForm.num = "";
      this.ruleForm.phone = "";
      this.ruleForm.address = "";
      this.ruleForm.sex = "";
      this.currentIndex++;
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.my-client {
  box-sizing: border-box;
  padding: 30px 90px;
  .mc-main {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 40px 30px;
    .mcm-form {
      display: flex;
      justify-content: space-between;
      .mcmf-button {
        width: 84px;
        height: 38px;
        background: #333333;
        border-radius: 3px;
        color: #f9d532;
      }
    }
    .mcm-pagination {
      text-align: right;
      margin: 35px 0 0;
    }
  }
}
</style>